<template>
  <div class="refine_opcreateships">
    <h2 class="titleblue">{{title}}</h2>
    <div class="contant">
      <el-form ref="form" :model="form" :rules="rules">
        <div class="grid-content">
          <label><i>*</i>船舶种类</label>
          <el-select :disabled="detail=='look'?true:false" v-model="form.category" class="select-width-220">
            <el-option
              v-for="item in shipOptions"
              :key="item.value"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="grid-content">
          <label>船名</label>
          <el-input :disabled="detail=='look'?true:false" class="select-width-220" v-model="form.cnName"
                    placeholder=""></el-input>
        </div>
        <div class="grid-content">
          <label><i>*</i>船舶登记编号</label>
          <el-input :disabled="detail=='look'?true:false" class="select-width-220" v-model="form.regNo"
                    placeholder=""></el-input>
        </div>
        <div class="grid-content">
          <label>总吨(GT)</label>
          <el-input :disabled="detail=='look'?true:false" class="select-width-220" v-model="form.grossTonnage"
                    placeholder=""></el-input>
        </div>
        <div class="grid-content" v-if="form.category=='182'">
          <label>舱容(m³)</label>
          <el-input :disabled="detail=='look'?true:false" class="select-width-220" v-model="form.capacity"
                    placeholder=""></el-input>
        </div>
        <div class="grid-content">
          <label>航区</label>
          <el-select :disabled="detail=='look'?true:false" v-model="form.navZone" class="select-width-220">
            <el-option
              v-for="item in navOptions"
              :key="item.value"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="grid-content">
          <label>船舶类型</label>
          <el-input :disabled="detail=='look'?true:false" class="select-width-220" v-model="form.typeName"
                    placeholder=""></el-input>
        </div>
        <div class="grid-content" v-if="form.category=='181'">
          <label>油污水舱容(m³)</label>
          <el-input :disabled="detail=='look'?true:false" class="select-width-220" v-model="form.sewCapacity"
                    placeholder=""></el-input>
        </div>
        <div class="grid-content" v-if="form.category=='181'">
          <label>收油机固定方式</label>
          <el-input :disabled="detail=='look'?true:false" class="select-width-220" v-model="form.ocFixedMode"
                    placeholder=""></el-input>
        </div>
        <div class="grid-content" v-if="form.category=='181'">
          <label>内置式收油机类型</label>
          <el-input :disabled="detail=='look'?true:false" class="select-width-220" v-model="form.buiCollector"
                    placeholder=""></el-input>
        </div>
        <div class="grid-content line-height-25" v-if="form.category=='181'">
          <label>内置式收油机最大回收速率(m³/h)</label>
          <el-input :disabled="detail=='look'?true:false" class="select-width-220" v-model="form.recoveryRate"
                    placeholder=""></el-input>
        </div>
        <div class="grid-content" v-if="form.category=='181'">
          <label>是否安装安装消油剂</label>
          <el-radio-group v-model="form.insAgent" :disabled="detail=='look'?true:false">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </div>
        <div class="grid-content line-height-25" v-if="form.category=='181'">
          <label>船上安装的其他应急设备</label>
          <el-input :disabled="detail=='look'?true:false" class="select-width-220" v-model="form.otherRecoveryRate"
                    placeholder=""></el-input>
        </div>
        <div class="grid-content">
          <label>单位名称</label>
          <el-input :disabled="detail=='look'?true:false" class="select-width-220" v-model="form.unitName"
                    placeholder=""></el-input>
        </div>
        <div class="grid-content">
          <label>所属辖区</label>
          <el-input :disabled="detail=='look'?true:false" class="select-width-220" v-model="form.belongArea"
                    placeholder=""></el-input>
        </div>
        <div class="grid-content">
          <label>停靠区域</label>
          <el-input :disabled="detail=='look'?true:false" class="select-width-220" v-model="form.parkedArea"
                    placeholder=""></el-input>
        </div>
        <div class="grid-content">
          <label>MMSI</label>
          <el-input :disabled="detail=='look'?true:false" class="select-width-220" v-model="form.mmsi"
                    placeholder=""></el-input>
        </div>
        <div class="grid-content">
          <label>IM呼号</label>
          <el-input :disabled="detail=='look'?true:false" class="select-width-220" v-model="form.imo"
                    placeholder=""></el-input>
        </div>
      </el-form>
      <div class="footerbtn" v-show="footerbtn">
        <el-button class="sure" @click="sure">确定</el-button>
        <el-button class="cancel" @click="cancel">取消</el-button>
      </div>
    </div>

  </div>
</template>

<script>
  import emmerShipService from '@/services/EmmerShipService.js'

  export default {
    name: 'CreateShip',
    props: ['id', 'detail', 'shipOptions', 'navOptions', 'emeOptions'],
    watch: {
      detail: function (value) {
        if (value == 'create') {
          this.footerbtn = true
          this.title = '新建溢油应急船舶'

        } else if (value == 'edit') {
          this.footerbtn = true
          this.title = '编辑溢油应急船舶'

        } else if (value == 'look') {
          this.footerbtn = false
          this.title = '溢油应急船舶详情'

        }
      }
    },
    data: function () {
      return {
        form: {
          belongArea: '',// 所属辖区 ,
          buiCollector: '',// 内置式收油机类型 ,
          capacity: '',// 仓容 ,
          category: '',// 船舶分类（字典表） ,
          cnName: '',// 中文船名 ,
          grossTonnage: '',// 总吨 ,
          imo: '',// IMO呼叫 ,
          insAgent: 1, // 是否安装安装消油剂(0:否,1:是) ,
          mmsi: '',// mmsi ,
          navZone: '',// 航区 ,
          ocFixedMode: '',// 收油机固定方式 ,
          orgId: '',// 机构id ,
          otherRecoveryRate: '',// 船上安装的其他应急设备 ,
          parkedArea: '',// 停靠区域 ,
          recoveryRate: '',// 内置式收油机最大回收速率(m3/h） ,
          regNo: '',// 船舶登记编号 ,
          sewCapacity: '',// 油污水舱容 ,
          typeName: '',// 船舶类型（手动输入） ,
          unitName: '',// 单位名称
        },
        title: '新增溢油应急船舶',
        footerbtn: true,
        sjhq: [],
        sewOption: [{
          value: '选项1',
          label: '搜救机构'
        }],
        zyyj: false,
        ybyj: false,
        rules: {
          shipType: [
            {required: true, message: '请选择船舶种类', trigger: 'blur'}
          ],
          regNo: [
            {required: true, message: '请输入船舶登记编号', trigger: 'blur'}
          ]
        },
        detailId: null,
        createTime: null
      }
    },
    created () {
      var value = this.detail
      if (value == 'create') {
        this.footerbtn = true
        this.title = '新建溢油应急船舶'
      } else if (value == 'edit') {
        this.footerbtn = true
        this.title = '编辑溢油应急船舶'
        this.showDetail()
      } else if (value == 'look') {
        this.footerbtn = false
        this.title = '溢油应急船舶详情'
        this.showDetail()
      }
    },
    methods: {
      showDetail () {
        var data = this.$route.params.data
        for (let key in data) {
          if (key == 'id') {
            this.detailId = data[key]
          } else if (key == 'createTime') {
            this.createTime = data[key]
          } else if (key == 'category' && data[key]) {
            this.shipOptions.forEach(item => {
              if (data[key] == item.name) {
                this.form[key] = item.id
              }
            })
          } else if (key == 'navZone' && data[key]) {
            this.navOptions.forEach(item => {
              if (data[key] == item.name) {
                this.form[key] = item.id
              }
            })
          } else if (key == 'insAgent') {
            if (data[key] == true) {
              this.form[key] = 1
            }else if (data[key] == false) {
              this.form[key] = 0
            }
          } else {
            this.form[key] = data[key]
          }
        }
      },
      sure () {
        // return false
        if (!this.form.category) {
          this.$alert('船舶种类不能为空', '提示')
          return false
        }
        if (!this.form.regNo.trim()) {
          this.$alert('船舶登记编号不能为空', '提示')
          return false
        }
        let obj = {
          belongArea: this.form.belongArea,
          buiCollector: this.form.buiCollector,
          capacity: this.form.capacity,
          category: this.form.category,
          cnName: this.form.cnName,
          grossTonnage: this.form.grossTonnage,
          imo: this.form.imo,
          insAgent: this.form.insAgent,
          mmsi: this.form.mmsi,
          navZone: this.form.navZone,
          ocFixedMode: this.form.ocFixedMode,
          orgId: this.form.orgId,
          otherRecoveryRate: this.form.otherRecoveryRate,
          parkedArea: this.form.parkedArea,
          recoveryRate: this.form.recoveryRate,
          regNo: this.form.regNo,
          sewCapacity: this.form.sewCapacity,
          typeName: this.form.typeName,
          unitName: this.form.unitName
        }
        if (this.title == '编辑溢油应急船舶') {
          obj.id = this.detailId
          obj.createTime = this.createTime
          emmerShipService.update(obj).then(res => {
            if (res) {
              this.$message({
                type: 'success',
                message: '修改成功!'
              })
              this.$emit('close')
            }
          })
        } else {
          emmerShipService.create(obj).then(res => {
            if (res) {
              this.$message({
                type: 'success',
                message: '修改成功!'
              })
              this.$emit('close')
            }
          })
        }
      },
      cancel () {
        this.$emit('close')
      },
      getData (id) {

        this.$axios.get(this.$config['detailOsShip'], {
          params: {
            skey: localStorage.getItem('auth'),
            d_id: this.id
          }
        }).then((res) => {
          if (res.data.content) {
            this.form = res.data.content

            for (var x of this.sjhq) {
              if (x.d_id == this.form.navZone) {
                this.form.navZone = x.name
                break
              }
            }
          }
        })

      },

    }
  }
</script>

<style scoped lang="scss">
  .refine_opcreateships {
    width: 100%;
    display: inline-block;
    padding-bottom: 50px;

    .line-height-25 label {
      line-height: 20px !important;
      text-align: right !important;
    }

    .grid-content {
      width: 50%;
      float: left;
      margin-bottom: 20px;

      label {
        width: 150px;
        float: left;
        line-height: 40px;
        text-align: right;
        margin-right: 10px;

        i {
          color: #f56c6c;
          margin-right: 4px;
          font-style: normal;
        }
      }

      .el-radio-group {
        width: 220px;
        float: left;
        display: block;

        label {
          width: 30%;
          float: left;
        }
      }
    }

    .footerbtn {
      margin-top: 50px;
    }
  }
</style>
